$(function () {

});
// 声明首页用到的图表变量
var devFaultTypeTimeEchart,devFaultEchart,
    // 基地设备状态分布图表变量
    devStatusEchart, jz5DevStatusEchart, zz2DevStatusEchart, eqknDevStatusEchart,
    // 设备维护或维修工单数分布图表
    devPmTicketNumDistributionEcharts,devRepairTicketNumDistributionEcharts,
    // 基地PM工单完成率统计图表变量
    devPmTicketEcharts,jz5DevPmTicketEcharts,zz2DevPmTicketEcharts,eqknDevPmTicketEcharts;
var vm = new Vue({
    el: '#main_app',
    data: {
        password: '',
        menuList: [],
        devFaultTypeTimeEchartOption:{
            color: ['#4472c4','#ed7d31'],
            title: {
                text: '故障分类次数统计趋势图',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['故障次数', '累计百分比'],
                bottom: 10,
                left: 'center',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top:'15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: [
                {
                    type: 'value',
                    minInterval: 1
                },
                {
                    type: 'value',
                    axisLabel: {
                        formatter:'{value} %'
                    }
                }
            ],
            series: [
                {
                    name:'故障次数',
                    data: [],
                    type: 'bar',
                    barWidth: '50%',
                    label: {
                        show: true,
                        position: 'inside'
                    }
                },
                {
                    name:'累计百分比',
                    type: 'line',
                    yAxisIndex: 1,
                    data: []
                }
            ]
        },
        // 设备PM工单项模板
        devPmTicketOptionTemplate:{
            title: {
                text: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
            legend: {
                bottom: 5
            },
            label: {
                normal: {
                    formatter: 'afafa',
                    position: 'inside'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top:'15%',
                containLabel: true
            },
            //设置饼状图每个颜色块的颜色
            color : [ '#4472c4', '#ed7d31'],
            series: [
                {
                    name: 'PM工单完成率统计',
                    type: 'pie',
                    radius: '65%',
                    data: [],
                    label: {
                        show: true,
                        position: 'inside',
                        formatter: '{c} : {d}%'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        },
        // 设备状态分布数量统计option模板
        devStatusOptionTemplate:{
            color: ['#6ec56f','#f8e567','#a5a5a5','#f10606','#4472c4','#6ec56f'],
            title: {
                text: '设备状态分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            legend: {
                data:[],
                bottom: 5
            },
            labelLine: {
                show: false,
            },
            series: [
                {
                    type: 'pie',
                    radius: ['30%', '50%'],
                    selectedMode: 'single',
                    data: []
                }
            ]
        },
        faultTimeTopOption:{
            color: ['#4472c4'],
            title: {
                text: '故障次数TOP5设备',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                    rotate:  30
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '5%',
                top:'15%',
                containLabel: true
            },
            series: [
                {
                    name:'次数',
                    data: [],
                    type: 'bar',
                    barWidth: '50%',
                    label: {
                        show: true,
                        position: 'inside'
                    }
                }
            ]
        },
        // PM工单数量分布图option
        devPmTicketNumDistributionOption:{
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title:{
                text:'设备PM工单数量分布',
                subtext:'只展示近半年PM工单统计',
                left:'center'
            },
            legend: {
                data: ['完成工单数量', '延期工单数量'],
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['四月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '第一周', '第二周', '第三周']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color:['#4472c4','#ed7d31'],
            series: [
                {
                    name: '完成工单数量',
                    type: 'bar',
                    stack: 'PM工单数量分布',
                    barWidth: '40%',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: []
                },
                {
                    name: '延期工单数量',
                    type: 'bar',
                    stack: 'PM工单数量分布',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: []
                }
            ]
        },
        // 设备维修工单数量分布图option
        devRepairTicketNumDistributionOption : {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            title:{
                text:'设备维修工单数量分布',
                subtext:'只展示近半年维修工单统计',
                left:'center'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            color:['#4472c4'],
            series: [
                {
                    name: '工单数',
                    type: 'bar',
                    barWidth: '50%',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: []
                }
            ]
        }
    },
    methods: {
        // 加载设备状态分布统计数据{curDeptId: '01',title:'机总五车间',echartTarget: devStatusEchart}
        loadDevStatusDistributionStatData: function(loadParam){
            // 加载设备状态概览
            Ajax.request({
                url: "../device/stat/status",
                params: JSON.stringify({curDeptId: loadParam.curDeptId}),
                type: "POST",
                contentType: "application/json",
                successCallback: function (res) {
                    loadParam.echartTarget.hideLoading();
                    var option = {
                        title: {
                            text: loadParam.title,
                            subtext: ''
                        },
                        series: {
                            data: res.devStatusStat.seriesData
                        },
                        legend: {
                            data: res.devStatusStat.legendData
                        }
                    };

                    if(res.devStatusStat.seriesData.length == 0){
                        option.title.subtext = '当前组织下暂无设备信息';
                    }
                    loadParam.echartTarget.setOption(option);
                }
            });
        },
        // 加载基地PM工单完成情况统计 {curDeptId: '01',title:'机总五车间',echartTarget: devStatusEchart}
        loadDevPmTicketCompleteRateStatData: function(loadParam){
            // 加载设备状态概览
            Ajax.request({
                url: "../device/stat/pmCompleteRate",
                params: JSON.stringify({curDeptId: loadParam.curDeptId}),
                type: "POST",
                contentType: "application/json",
                successCallback: function (res) {
                    loadParam.echartTarget.hideLoading();
                    var option = {
                        title: {
                            text: loadParam.title,
                            subtext: ''
                        },
                        series: {
                            data: res.devStatusStat.seriesData
                        },
                        legend: {
                            data: res.devStatusStat.legendData
                        }
                    };
                    if(res.devStatusStat.seriesData.length == 0){
                        option.title.subtext = '当前组织下暂无PM工单';
                    }
                    loadParam.echartTarget.setOption(option);
                }
            });
        },
        getInfo:function(){
            // 加载全厂设备状态分布信息
            this.loadDevStatusDistributionStatData({'curDeptId': '01','title':'设备状态分布','echartTarget': devStatusEchart});
            // 加载机总五车间设备状态分布信息
            this.loadDevStatusDistributionStatData({'curDeptId': '0111','title':'机加三车间设备状态分布','echartTarget': jz5DevStatusEchart});
            // 加载铸造二车间设备状态分布信息
            this.loadDevStatusDistributionStatData({'curDeptId': '0101','title':'铸造二车间设备状态分布','echartTarget': zz2DevStatusEchart});
            // 加载机总三车间设备状态分布信息
            this.loadDevStatusDistributionStatData({'curDeptId': '0119','title':'总装三车间设备状态分布','echartTarget': eqknDevStatusEchart});

            // 加载设备故障TOP数统计
            Ajax.request({
                url: "../device/stat/pmTicketNumDistribution",
                type: "POST",
                params: JSON.stringify({statMonthlyNum: 6}),
                contentType: "application/json",
                successCallback: function (res) {
                    var statResult = res.statResult;
                    var option = {
                        xAxis: {
                            data: statResult.xaxisData
                        },
                        series: statResult.barSeriesData
                    };
                    devPmTicketNumDistributionEcharts.setOption(option);
                }
            });
            // 加载设备维修工单数量分布统计数据
            Ajax.request({
                url: "../device/stat/repairTicketNumDistribution",
                type: "POST",
                params: JSON.stringify({statMonthlyNum: 6}),
                contentType: "application/json",
                successCallback: function (res) {
                    // 需要从
                    var statResult = res.statResult;
                    var option = {
                        xAxis: {
                            data: statResult.xaxisData
                        },
                        series: statResult.barSeriesData
                    };
                    devRepairTicketNumDistributionEcharts.setOption(option);
                }
            });

            // 加载NE1基地设备PM工单完成情况统计信息
            this.loadDevPmTicketCompleteRateStatData({'curDeptId': '01','title':'NE1基地PM完成情况','echartTarget': devPmTicketEcharts});
            // 加载机总五车间设备PM工单完成情况统计信息
            this.loadDevPmTicketCompleteRateStatData({'curDeptId': '0111','title':'机加三车间PM完成情况','echartTarget': jz5DevPmTicketEcharts});
            // 加载铸造五车间设备PM工单完成情况统计信息
            this.loadDevPmTicketCompleteRateStatData({'curDeptId': '0121','title':'铸造五车间PM完成情况','echartTarget': zz2DevPmTicketEcharts});
            // 加载机总三车间设备PM工单完成情况统计信息
            this.loadDevPmTicketCompleteRateStatData({'curDeptId': '0119','title':'总装三车间PM完成情况','echartTarget': eqknDevPmTicketEcharts});

            // 加载设备故障TOP数统计
            Ajax.request({
                url: "../device/stat/topFault",
                type: "POST",
                params: JSON.stringify({topNum: 5}),
                contentType: "application/json",
                successCallback: function (res) {

                    var topFaultDev = res.topFaultDev;
                    var option = {
                        yAxis: {
                            data: topFaultDev.devNames,
                        },
                        series: [{
                            data: topFaultDev.faultTimes,
                        }]
                    };
                    devFaultEchart.setOption(option);
                }
            });
            // 统计设备故障类别次数和累计百分比
            Ajax.request({
                url: "../device/stat/faultTypeTimeAndRate",
                type: "GET",
                contentType: "application/json",
                successCallback: function (res) {
                    var devFaultTypeTimeStat = res.devFaultTypeTimeStat;
                    var option = {
                        xAxis: {
                            type: 'category',
                            data: devFaultTypeTimeStat.xAxisData
                        },
                        series: [{
                            data: devFaultTypeTimeStat.faultTimes
                        },{
                            data: devFaultTypeTimeStat.accumulativeRate
                        }]
                    };
                    devFaultTypeTimeEchart.setOption(option);
                }
            });
        }
    },
    mounted: function(){
        // 设备运行状态图表
        // 设备状态分布-整个工厂所有设备
        devStatusEchart = echarts.init(document.getElementById("devStatusDistributionEcharts"));
        devStatusEchart.setOption(this.devStatusOptionTemplate, true);
        // 设备状态分布-机总五
        jz5DevStatusEchart = echarts.init(document.getElementById("jz5DevStatusDistributionEcharts"));
        jz5DevStatusEchart.setOption(this.devStatusOptionTemplate, true);
        // 设备状态分布-铸造二车间
        zz2DevStatusEchart = echarts.init(document.getElementById("zz2DevStatusDistributionEcharts"));
        zz2DevStatusEchart.setOption(this.devStatusOptionTemplate, true);
        // 设备状态分布-机总三
        eqknDevStatusEchart = echarts.init(document.getElementById("eqknDevStatusDistributionEcharts"));
        eqknDevStatusEchart.setOption(this.devStatusOptionTemplate, true);

        // 设备PM工单数分布图表
        devPmTicketNumDistributionEcharts = echarts.init(document.getElementById("devPmTicketNumDistributionEcharts"));
        devPmTicketNumDistributionEcharts.setOption(this.devPmTicketNumDistributionOption, true);
        // 设备维修工单数分布图表
        devRepairTicketNumDistributionEcharts = echarts.init(document.getElementById("devRepairTicketNumDistributionEcharts"));
        devRepairTicketNumDistributionEcharts.setOption(this.devRepairTicketNumDistributionOption, true);

        // 基地PM工单完成率统计
        devPmTicketEcharts = echarts.init(document.getElementById("devPmTicketEcharts"));
        devPmTicketEcharts.setOption(this.devPmTicketOptionTemplate, true);
        // PM工单完成率统计-机总五
        jz5DevPmTicketEcharts = echarts.init(document.getElementById("jz5DevPmTicketEcharts"));
        jz5DevPmTicketEcharts.setOption(this.devPmTicketOptionTemplate, true);
        // PM工单完成率统计-铸造二车间
        zz2DevPmTicketEcharts = echarts.init(document.getElementById("zz2DevPmTicketEcharts"));
        zz2DevPmTicketEcharts.setOption(this.devPmTicketOptionTemplate, true);
        // PM工单完成率统计-机总三
        eqknDevPmTicketEcharts = echarts.init(document.getElementById("eqknDevPmTicketEcharts"));
        eqknDevPmTicketEcharts.setOption(this.devPmTicketOptionTemplate, true);

        // 设备故障次数TOP5统计图表
        devFaultEchart = echarts.init(document.getElementById("devFaultTimeTopStat"));
        devFaultEchart.setOption(this.faultTimeTopOption, true);
        // 设备故障分类次数统计趋势图表
        devFaultTypeTimeEchart = echarts.init(document.getElementById("devFaultTypeTimeEchart"));
        devFaultTypeTimeEchart.setOption(this.devFaultTypeTimeEchartOption, true);
        // 加载数据
        this.getInfo();
    }

});
